<template>
  <div>
    <div class="c-app flex-row align-items-center">
      <CCard>
        <CCardBody>
          <CForm>
            <div class="HHead">
              <div></div>
            </div>
            <div class="Body-content">
              <div class="Body-left"></div>

              <div class="Body-right">
                <div class="BodyContent">
                  <CRow class="head headRow">
                    <div class="headnav">
                      <!-- <img class="tupian1" src="../../../public/img/logo_1.png" alt /> -->
                      <!-- <img class="tupian1" src="../../../public/img/logo.svg" alt /> -->
                      <div class="imageHeight" align="center">
                        <img
                          class="tupian1"
                          :style="imgSty"
                          :src="loginImage"
                          alt
                        />
                      </div>
                      <div>
                        <!-- <span class="tupian-content">生态保护红线</span>
                        <span class="tupian-content2">ECO-REDLINE</span>-->
                      </div>
                    </div>
                  </CRow>

                  <CRow>
                    <CCol class="Cont">
                      <CRow>
                        <CInput
                          class="ContInput"
                          v-model="username"
                          placeholder="用户名"
                          autocomplete="username email"
                        >
                          <template #prepend-content>
                            <CIcon name="cil-user" />
                          </template>
                        </CInput>

                        <CInput
                          class="ContInput"
                          v-model="pwd"
                          placeholder="密码"
                          type="password"
                          autocomplete="curent-password"
                          @keyup.enter="enter"
                        >
                          <template #prepend-content>
                            <CIcon name="cil-lock-locked" />
                          </template>
                        </CInput>

                        <div class="remember">
                          <div class="remember-left">
                            <input type="checkbox" />
                            <span class="text-yanzheng">记住账户和密码</span>
                            <!-- <CButton class="nodengluBtn" color="primary" @click="Login">游客登录</CButton> -->
                          </div>
<!--                          <div style="float: right">
                            &lt;!&ndash; <input type="checkbox" />
                            <span class="text-yanzheng">记住账户和密码</span>&ndash;&gt;
                            <span
                              class="nodengluBtn"
                              color="primary"
                              @click="notLogin"
                              >游客登录</span
                            >
                          </div>-->
                        </div>
                        <div class="dengluAnniu">
                          <CButton
                            class="dengluBtn"
                            color="primary"
                            @click="Login"
                            >登 录</CButton
                          >
                        </div>
                      </CRow>
                    </CCol>
                    <CCol col="5">
                      <div class="head-bgc" col="9">
                        <!-- <div class="head-section2">国 家 生 态 保 护 红 线 监 管 平 台</div> -->
                        <!-- <div class="head-section3">— — 数 据 处 理 与 加 工 系 统</div> -->
                        <div class="head-section2">{{ firstTitle }}</div>
                        <div class="head-section3">— — {{ secondTitle }}</div>
                        <!-- <div class="head-section2">遥 感 数 据 处 理 云 平 台</div> -->
                        <!-- <div class="head-section3">— — 提供多源遥感数据在线生产与分析服务</div> -->
                      </div>
                    </CCol>
                  </CRow>
                </div>
              </div>
            </div>
            <div class="HHead">
              <div></div>
            </div>
          </CForm>
        </CCardBody>
        <TheFooter v-if="isFooter"></TheFooter>
      </CCard>
    </div>
    <Modal
      v-model="changePwdShow"
      title="修改密码"
      centered
      draggable
      scrollable
    >
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="用户名"
              placeholder="请输入用户名"
              horizontal
              v-model="userData.username"
              readonly
            />
            <CInput
              label="旧密码"
              placeholder="请输入旧密码"
              horizontal
              v-model="userData.oldPwd"
            />
            <CInput
              label="新密码"
              placeholder="请输入至少6个字符,其中必须包含字母,数字"
              horizontal
              v-model="userData.newPwd"
              data-vaild="isDigits"
            />
            <CInput
              label="确认密码"
              placeholder="再次输入新密码"
              horizontal
              v-model="userData.conPwd"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="changeCancel" color="info" class="changeCancel"
          >取消</CButton
        >
        <CButton @click="changeOk" color="info">确定</CButton>
      </template>
    </Modal>
  </div>
</template>

<script>
// import { mapActions } from "vuex";
import TheFooter from "../../containers/TheFooter";
export default {
  name: "login",
  data() {
    return {
      isFooter: isFooter,
      imgSty: "",
      loginImage: "",
      firstTitle: "",
      secondTitle: "",
      username: "",
      pwd: "",
      userData: {
        username: "",
        oldPwd: "",
        newPwd: "",
        conPwd: "",
        isMd5: false,
        systemId: systemId,
      },
      changePwdShow: false,
    };
  },
  components: {
    TheFooter,
  },
  mounted() {
    this.updateIcon();
  },
  created() {
    this.enter();
  },
  methods: {
    // ...mapActions(["login"]),
    notLogin() {
      this.$store.dispatch("login", null);
      this.$router.replace("/adminHome");
    },
    updateIcon() {
      let self = this;
      let path = this.$api.homeLoginOthers.getByAppId + systemId;
      self.http.get(path).then((res) => {
        if (res.data.success) {
          self.loginImage = res.data.data.loginImage;
          self.firstTitle = res.data.data.firstTitle;
          self.secondTitle = res.data.data.secondTitle;
          self.imgSty =
            "margin-top:30px;width:" +
            res.data.data.loginWidth +
            "px;height:" +
            res.data.data.loginHeight +
            "px";
        }
      });
    },
    Login() {
      let self = this;
      let path = this.$api.homeLoginOthers.login;
      let proPath = this.$api.homeLoginOthers.checkVisit + "/" + 9;
      let params = {
        username: this.username,
        password: this.$md5(self.pwd),
        // isMd5: true,
        encrypt: true,
        systemId: systemId,
      };
      this.http
        .post(path, params)
        .then((res) => {

          if (res.data.success) {     
            let result = res.data.data;
            //生态红线配置
            self.saveUserInfoSTHX(result);
            // self.saveUserInfoPIE(result)
            self.$router.push({ path: "/adminHome" });
          } else {
            this.$Message.error(res.data.message);
          }
        })
        .catch((err) => {});
    },
    saveUserInfoSTHX(result) {
      let user = {
        userName: result.userData.userName,
        userId: result.userData.userId,
        token: result.token,
        department: result.userData.organizationName,
        nickName: result.userData.nickName,
        roleName: result.userData.roleName,
        roleInfo: result.userData.roleInfo,
        mobile: result.userData.mobile,
      };

      this.$store.dispatch("login", user); //将user保存到store中
    },

    saveUserInfoPIE(result) {
      window.sessionStorage.setItem("user", result.userData.userName);
      window.sessionStorage.setItem("PIECloud-Token", result.token);
      window.sessionStorage.setItem("userId", result.userData.userId);
    },
    enter() {
      let _this = this;
      document.onkeydown = function (event) {
        let pathstr = window.location.hash; //获取当前路由
        let patharr = pathstr.split("/");
        let logindata = patharr[patharr.length - 1];
        let e = event || window.event || arguments.callee.caller.arguments[0];
        //判断字段
        if (e && e.keyCode == 13 && logindata == "login") {
          _this.Login();
        }
      };
    },
    changeOk() {
      let _this = this;
      if (
        _this.userData.oldPwd == "" ||
        _this.userData.newPwd == "" ||
        _this.userData.conPwd == ""
      ) {
        this.$Message.warning("旧密码、新密码和确认密码不能为空");
        return;
      }

      if (_this.userData.newPwd != _this.userData.conPwd) {
        this.$Message.warning("新密码与确认密码不一致");
        return;
      }

      //old正则限制：至少8个字符，至少1个字母，1个数字和1个特殊字符
      // let oldvalue =
      //   "^(?=.*[A-Za-z])(?=.*\\d)(?=.*[$@$!%*#?&])[A-Za-z\\d$@$!%*#?&]{8,}$";
      let newValue = "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d$@$!%*#?&]{6,}$"; //至少6位以上的数字和字母 特殊字符串可选
      let regExp = new RegExp(newValue);

      let result = regExp.test(this.userData.newPwd);
      if (result == false) {
        this.$Message.warning(
          "密码需要包含至少6个字符，必须同时包含字母、数字",
          3000
        );
        return;
      }
      let path = this.$api.homeLoginOthers.changePwd;
      let param = _this.userData;
      this.http
        .post(path, param)
        .then((res) => {
          if (res.data.success) {
            this.$Message.success(res.data.message + "，请重新登录");
            setTimeout(function () {
              _this.$router.push({
                path: "/pages/login",
              });
              _this.$store.dispatch("logout"); //清除登录信息
            }, 1000);

            this.pwd = "";
            this.changePwdShow = false;
          } else {
            this.$Message.error(res.data.message);
          }
        })
        .catch((err) => {});
    },
    changeCancel() {
      this.changePwdShow = false;
    },
  },
};
</script>
<style scoped>
.Body-content {
  display: flex;
}
.BodyContent {
  width: 510px;
  margin-left: 92px;
}
.Body-left {
  width: 70%;
  background-color: rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 1366px) {
  .Body-right {
    width: 77%;
    background-color: rgba(0, 0, 0, 0.7);
  }
}
@media screen and (min-width: 1367px) and (max-width: 1919px) {
  .Body-right {
    width: 76%;
    background-color: rgba(0, 0, 0, 0.7);
  }
}
@media screen and (min-width: 1920px) {
  .Body-right {
    width: 45%;
    background-color: rgba(0, 0, 0, 0.7);
  }
}
.head {
  text-align: -webkit-center;
  margin-bottom: 10px;
}
.headnav {
  text-align: justify;
  width: 245px;
}
.head-nav {
  display: flex;
  height: 7.5rem;
  margin-top: -5rem;
  margin-left: 1.25rem;
}
.tupian1 {
  /* height: 4.25rem; */
  /* height: 4.25rem; */
  margin: auto;
  /* margin-top: 15px; */
  /* width: 102px; */
}
.tupian-content {
  display: block;
  font-family: "微软雅黑";
  font-weight: 100;
  font-size: 14px;
  color: #fff;
  margin: auto;
  margin-top: -15px;
  text-align: center;
}
.tupian-content2 {
  display: block;
  font-weight: 100;
  font-family: "微软雅黑";
  font-size: 13px;
  color: #fff;
  margin: auto;
  text-align: center;
  margin-bottom: 0px !important;
}

.head-bgc {
  background-color: rgba(0, 0, 0, 0);
  flex: 1;
  margin-top: -6.5rem;
  margin: auto;
}
.head-section2 {
  font-size: 27px;
  /* 30px; */
  font-weight: 545;
  color: #fff;
  width: max-content;
  margin-left: auto;
}
.head-section3 {
  margin-top: 0.85rem;
  font-size: 18px;
  color: #fff;
  width: max-content;
  padding-left: 90px;
}
.ivu-layout-header {
  background: none;
  padding: 0 50px;
  height: 64px;
  line-height: 64px;
}

.align-items-center {
  background-repeat: no-repeat;
  z-index: 0;
}

.text-password {
  color: #fff;
  margin-right: 1.25rem;
  font-size: 1.25rem;
}
.text-user {
  color: #fff;
  font-size: 1.25rem;
}
.text-yanzheng {
  color: #fff;
  margin-left: 1.5625rem;
}
.remember {
  display: inline-block;
}
.card {
  background-color: rgba(255, 255, 255, -0.6);
  border: none;
  margin: auto;
  display: contents;
}
.card-header {
  background-color: rgba(255, 255, 255, 0) !important;
  border: none;
  padding: 3.75rem 9.25rem;
}
.headRow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
}
.ContInput {
  width: 78%;
}
.dengluAnniu {
  width: 95%;
}

.dengluBtn {
  width: 83%;
  height: 35px;
  line-height: 0.9rem;
  margin-bottom: 35px;
  margin-top: 0.8rem;
  background-color: #5082b7;
  border: none;
  color: white;
  font-weight: 700;
}

.nodengluBtn {
  width: 80px;
  height: 30px;
  margin-left: 30px;
  /* line-height: 0.9rem; */
  margin-top: -6px;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  color: white;
  /* font-weight: 700; */
  cursor: pointer;
}
.text-center {
  margin-left: 27px;
  text-align: left !important;
}

.text-center:after {
  content: "";
}
.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 0% !important;
}
.c-app {
  background: url("../../assets/icons/bgImg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  height: 100vh;
}
.remember-left {
  float: left;
}
.remember-right {
  float: right;
  padding: 0 17px;
}
.imageHeight {
  /* align:center; */
  height: 74px;
}
.changeCancel {
  background-color: gray !important;
  border-color: gray !important;
}
</style>

